<template>
  <div class="switch-button">
    <div class="switch-type">
      <p>{{title}}</p>
      <el-button @click.stop="onChange(true)" class="switch-bg-btn-cls btn-cls1" :class="bIsDefault?'edit-handles-btn-active':''" type="text">{{btnStr_0}}</el-button>
      <el-button @click.stop="onChange(false)" class="switch-bg-btn-cls btn-cls2" :class="!bIsDefault?'edit-handles-btn-active':''" type="text"> {{btnStr_1}}</el-button>
    </div>
    <slot name="common"></slot>
    <div v-if="bIsDefault">
      <slot name="default"></slot>
    </div>
    <div v-else>
      <slot name="custom"></slot>
    </div>
  </div>
</template>


<script setup lang="ts">
import TooltipCommon from './tooltip-common.vue'

interface Props {
  modelValue?: boolean
  isClick?: boolean
  title?: string
  btnStr_0?: string
  btnStr_1?: string
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: true,
  isClick: true,
  title: '按钮样式',
  btnStr_0: '默认',
  btnStr_1: '自定义'
})

let bIsDefault = ref(props.modelValue)
const emit = defineEmits(['change','update:modelValue'])

const onChange = (val: boolean) => {
  if(props.isClick) {
    bIsDefault.value = val
    emit('update:modelValue', val)
    emit('change', val)
  }
}
</script>

<style lang="scss">
.switch-button{
  .switch-type{
    padding-left: var(--padding-16);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    p{
      font-size: 14px;
      color: #43475C;
      padding-right: var(--padding-16);
      margin: 0;
    }

    .switch-bg-btn-cls{
      width: 92px;
      height: 30px;
      font-size: 14px;
      background: #FFFFFF;
      border: 1px solid #F3F5FA;
      margin: 0;
      padding: 0;
    }
    .btn-cls1{
      border-right: none;
      border-radius: 5px 0 0 5px;
    }
    .btn-cls2{
      border-left: none;
      border-radius: 0 5px 5px 0;
    }
    .edit-handles-btn-active{
      background: #127BFF;
      color: #FFFFFF;
    }
  }
}
  
</style>
